<template>
  <div>
    <!-------------------------------表格 ----------------------down ------------------->
    <el-card :body-style="{padding:'0px 8px'}" style="background-color: #f3f3f3">
      <!-------------------------------按钮 ----------------------down------------------->
      <div>
        <el-input v-model="query.name" class="handle-input" placeholder="生产单号" />
        <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <!-------------------------------按钮 ----------------------up ------------------->
      <el-card>
        <el-table
          ref="multipleTable"
          v-loading="loadingMTable"
          max-height="560"
          height="560"
          :cell-style="{'padding':'2px','font-size':'12px'}"
          :header-cell-style="{'padding':'0px','font-weight':'800'}"
          :data="page.content"
          border
          class="table"
          header-cell-class-name="table-header"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <el-table-column prop="qcProduce.mocode" label="生产单号" />
          <el-table-column prop="qcProduce.projectName" label="方案名称" />
          <el-table-column prop="qcProduce.cdepname" label="生产部门名称" />
          <el-table-column prop="qcProduce.cinvname" label="产品名称" />
          <el-table-column prop="qcProduce.cinvstd" label="产品规格" />
          <el-table-column prop="userType" label="审核部门" />
          <el-table-column prop="status" label="状态" />
          <el-table-column prop="result" label="结果" />
          <el-table-column prop="createBy" label="创建人" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作" width="140" align="center">
            <template slot-scope="scope">
              <!--<el-button-->
                <!--type="text"-->
                <!--icon="el-icon-edit"-->
                <!--@click="handleEdit(scope.$index, scope.row)"-->
              <!--&gt;质检</el-button>-->
              <el-button
                type="text"
                icon="el-icon-view"
                style="color: #1ab394"
                @click="handleView(scope.$index, scope.row)"
              >查看单据</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total,sizes, prev, pager, next"
            :page-sizes="[10,20, 30, 40, 50]"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="page.totalElements"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </el-card>
    </el-card>
    <!-------------------------------表格 ----------------------up ------------------->
    <el-dialog :visible.sync="dialogVisible">
      <el-form ref="form" :model="form" label-width="80px" style="min-height: 300px;margin: 20px">
        <el-form-item label="判断结果" prop="judge">
          <el-switch
            v-model="form.judge"
            active-color="#13ce66"
            active-value="合格"
            inactive-value="不合格"
            inactive-color="#ff4949"
          />
          {{ form.judge }}
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
        <div style="text-align: right;margin-right: 20px;">
          <el-button type="success" @click="saveResult">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-------------------------------表格 ----------------------up ------------------->
    <el-drawer style="min-height: 600px;" :visible.sync="drawer" size="60%">
      <el-descriptions border>
        <el-descriptions-item label="方案名称" label-style="width:8%" content-style="width:20%">{{ quality.projectName }}</el-descriptions-item>
        <el-descriptions-item label="方案描述" :span="2" label-style="width:8%" content-style="width:60%">{{ quality.projectDescribe }}</el-descriptions-item>
        <el-descriptions-item label="产品编码" label-style="width:8%" content-style="width:23%">{{ quality.cinvcode }}</el-descriptions-item>
        <el-descriptions-item label="产品名称" label-style="width:8%" content-style="width:23%">{{ quality.cinvname }}</el-descriptions-item>
        <el-descriptions-item label="产品规格" label-style="width:8%" content-style="width:23%">{{ quality.cinvstd }}</el-descriptions-item>
        <el-descriptions-item label="明细单号" label-style="width:8%" content-style="width:23%">{{ quality.modid }}</el-descriptions-item>
        <el-descriptions-item label="部门名称" label-style="width:8%" content-style="width:23%">{{ quality.cdepname }}</el-descriptions-item>
        <el-descriptions-item label="生产单号" label-style="width:8%" content-style="width:23%">{{ quality.mocode }}</el-descriptions-item>
        <el-descriptions-item label="质检等级" label-style="width:8%" content-style="width:23%">{{ quality.level }}</el-descriptions-item>
        <el-descriptions-item label="质检水准" label-style="width:8%" content-style="width:23%">{{ quality.grade }}</el-descriptions-item>
        <el-descriptions-item label="抽检数量" label-style="width:8%" content-style="width:23%">{{ quality.qc }}</el-descriptions-item>
        <el-descriptions-item label="最小失败" label-style="width:8%" content-style="width:23%">{{ quality.ac }}</el-descriptions-item>
        <el-descriptions-item label="最大失败" label-style="width:8%" content-style="width:23%">{{ quality.re }}</el-descriptions-item>
        <el-descriptions-item label="创建时间" label-style="width:8%" content-style="width:23%">{{ quality.createTime }}</el-descriptions-item>
        <el-descriptions-item label="总检" label-style="width:8%" content-style="width:23%">{{ quality.measurement }}</el-descriptions-item>
      </el-descriptions>
      <el-tabs v-model="activeName" type="card" style="margin-top: 10px;">
        <el-tab-pane label="质检内容" name="质检内容">
          <el-table
            :data="quality.entitys"
            tooltip-effect="dark"
            border
            style="width: 100%;"
          >
            <el-table-column
              type="index"
              label="项次"
              width="50"
            />
            <el-table-column
              prop="planName"
              width="150px"
              label="测试项目"
            />
            <el-table-column
              prop="quotaName"
              width="150px"
              label="测试指标"
            />
            <el-table-column
              prop="specs"
              width="150px"
              label="规格"
            />
            <el-table-column
              v-if="quality.qc>=1"
              prop="no1"
              width="120px"
              label="NO.1"
            />
            <el-table-column
              v-if="quality.qc>=2"
              prop="no2"
              width="120px"
              label="NO.2"
            />
            <el-table-column
              v-if="quality.qc>=3"
              prop="no3"
              width="120px"
              label="NO.3"
            />
            <el-table-column
              v-if="quality.qc>=4"
              prop="no4"
              width="120px"
              label="NO.4"
            />
            <el-table-column
              v-if="quality.qc>=5"
              prop="no5"
              width="120px"
              label="NO.5"
            />
            <el-table-column
              prop="judge"
              width="90px"
              label="系统"
            />
            <el-table-column
              prop="result"
              width="110px"
              label="人工"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="图片" name="图片">
          <el-card v-for="(item,index) in quality.images" :key="index" style="height: 200px;width: 200px;float: left">
            <el-image :key="item.id" :src="fileURL+item.imgUrl" :preview-src-list="[fileURL+item.imgUrl]" />
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="质检记录" name="质检记录">
          <el-timeline>
            <el-timeline-item v-for="item of workflowResults" :key="item.id" :timestamp="item.createTime" placement="top">
              <el-card>
                <p><bold style="font-weight: bold;color: #1c84c6">{{ item.createBy }}:</bold>{{ item.remark }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script>
import { queryAll } from '@/api/workflow'
import { save } from '@/api/workflowresult'
import { delbyid } from '@/api/workflow'
export default {
  name: 'WorkflowIndex',
  data() {
    return {
      dialogVisible: false,
      loadingMTable: false,
      drawer: false,
      activeName: '质检内容',
      query: {
        pageIndex: 1,
        pageSize: 20,
        name: ''
      },
      quality: {},
      workflowResults: [],
      form: {},
      page: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.loadingMTable = true
      queryAll(this.query).then(res => {
        this.loadingMTable = false
        this.page = res.data.page
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        delbyid(row.id).then(res => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
        .catch(() => {
        })
    },
    // 编辑操作
    handleEdit(index, row) {
      this.form.refId = row.id
      this.form.workNode = row.workNode
      this.dialogVisible = true
    },
    handleView(index, row) {
      this.quality = row.qcProduce
      this.workflowResults = row.list
      this.drawer = true
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.$set(this.query, 'pageSize', val)
      this.getData()
    },
    saveResult() {
      save(this.form).then(res => {
        this.$message.success('保存成功')
        this.dialogVisible = false
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
</style>
